<template>
    <div id="login">
        <div id="formBox">
            <header>
                <section>立即登录</section>|
                <section>手机号登录</section>
            </header>
            <el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item class="input_item" label="账号" prop="pass">
                    <el-input type="text" v-model="loginForm.mobile" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item class="input_item" label="密码" prop="checkPass">
                    <el-input type="password" v-model="loginForm.pwd" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="loginIn">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { login } from '../utils/api'
export default {
  name: 'login',
  data() { 
    return {
        loginForm: {
            mobile: '',
            pwd: ''
        },
        rules: {}
    }
  },
  created() {

  },
  methods:{
      loginIn() {
          login(this.loginForm).then(res => {
            //   console.log(res)
            localStorage.setItem('token', res.token)
            this.$router.push({
                name: 'student'
            })
          })
      }
  },
 }
</script>

<style lang="scss" scoped>
#login{
    width: 100%;
    height: 100%;
    background-image: url('../assets/imgs/back.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#formBox {
    width: 500px;
    background-color: #fff;
    padding: 30px;
    padding-left: 0;
    padding-right: 50px;
    margin-right: 200px;
    border-radius: 20px;
    header{
        height: 70px;
        display: flex;
        section {
            flex-basis: 50%;
            text-align: center;
            cursor: pointer;
        }
    }
    form{
        flex-basis: 100%;
        height: 300px;
        .input_item{
            margin-top: 40px;
        }
        // text-align: center;
        button{
            width: 100%;
            text-align: center;
            margin-top: 60px;
        }
    }
}

</style>